<template>
  <div class="personal-report" v-if="!getIsPhone">
    <el-table
      :data="reportSummary"
      style="width: 100%"
      >
      <el-table-column
        prop="date"
        label="日期"
        >
      </el-table-column>
      <el-table-column
        prop="groupExpences"
        label="消费"
        >
      </el-table-column>
      <el-table-column
        prop="totlaBonus"
        label="中奖"
        >
      </el-table-column>
      <el-table-column
        class=""
        prop="lotteryRefund"
        label="彩票返点"
        >
      </el-table-column>
      <el-table-column
        prop="bjRefund"
        label="BI返水"
        >
      </el-table-column>
      <el-table-column
        class="groupBalance"
        prop="groupBalance"
        label="盈亏总额"
      >
        <template v-slot:default="scope">
          <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
          <span v-else style="color: green">{{balanceFormater(scope.row.groupBalance)}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="group-detail">
      <span class="title">盈亏明细</span>
    </div>
    <el-table
      :data="reportDetail"
      style="width: 100%"
      >
      <el-table-column
        prop="date"
        label="日期"
        :formatter="formatDate"
        >
      </el-table-column>
      <el-table-column
        prop="groupExpences"
        label="消费"
        >
      </el-table-column>
      <el-table-column
        prop="totlaBonus"
        label="中奖"
        >
      </el-table-column>
      <el-table-column
        class=""
        prop="lotteryRefund"
        label="彩票返点"
        >
      </el-table-column>
      <el-table-column
        prop="bjRefund"
        label="BI返水"
        >
      </el-table-column>
      <el-table-column
        class="groupBalance"
        prop="groupBalance"
        label="盈亏总额"
      >
      <template v-slot:default="scope">
        <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
        <span v-else style="color: green">{{balanceFormater(scope.row.groupBalance)}}</span>
      </template>
      </el-table-column>
    </el-table>
    <load-more></load-more>
  </div>
  <div v-else class="personal-report">
    <div class="billboard-wrapper">
      <bill-board>
        <div class="billboard-content">
          <div class="item border-right">
            <div class="title">{{type}}</div>
            <div class="amount statistics">
            <span>-{{groupInfo[0][fieldKey]}}</span><span class="extra">.00</span>
            </div>
          </div>
          <div class="item">
            <div class="title">盈亏</div>
            <div class="bonus statistics">
              <span>+{{groupInfo[0].totlaBonus}}</span><span class="extra">.00</span>
            </div>
          </div>
        </div>
      </bill-board>
    </div>
    <div class="">
      <div class="personal-detail">
        <span class="title">盈亏明细</span>
        <span class="content"></span>
      </div>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="reportDetail"
        style="width: 100%"
        :header-cell-style="cellStyle"
        :cell-style="cellStyle"
        @row-click="checkDetail"
        >
        <el-table-column
          :cell-style="cellStyle"
          prop="date"
          label="时间"
          :formatter="formatDate"
          >
        </el-table-column>
        <el-table-column
          :cell-style="cellStyle"
          :label="type"
          props="groupExpences"
          width="80"
          >
          <template v-slot:default="scope">
            <div>
              <span>{{scope.row[fieldKey]}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :cell-style="cellStyle"
          class="groupBalance"
          prop="groupBalance"
          label="总额"
          >
          <template v-slot:default="scope">
            <span v-if="scope.row.groupBalance > 0" style="color: red">{{scope.row.groupBalance}}</span>
            <span v-else style="color: green">{{scope.row.groupBalance}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="detail-info" v-show="showDetail">
      <personal-detail @click="hideDetail" :item="item"></personal-detail>
    </div>
  </div>

</template>

<script>
import { formatDateYMD } from '@/assets/js/util'
import TailBox from '@/components/tail-box/tail-box'
import LoadMore from '@/components/base/load-more/load-more'
import BillBoard from '@/components/base/bill-board/bill-board'
import PersonalDetail from './personal-detail'

import { mapGetters } from 'vuex';
export default {
  components: {
    TailBox,
    LoadMore,
    BillBoard,
    PersonalDetail
  },
  props: {
    type: {
      type: String,
      default: '消费'
    },
    fieldKey: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      reportSummary: [
        {
          date: '18/11/12~19/12/12',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
        }
      ],
      reportDetail: [
        {
          date: new Date().getTime() - 100 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: 1112223,
          groupExpences: 12356,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 99 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 98 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 97 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: 1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 96 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 95 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
        {
          date: new Date().getTime() - 94 * 24 * 3600 * 1000,
          userid: '1214',
          isLogin: false,
          password: '1',
          accountName: 'zhangsan88',
          groupBalance: -1112223,
          groupExpences: 123456,
          totalMembers: 12345,
          directMembers: 123,
          lotteryRefund: 2345,
          bjRefund: 1234,
          totlaBonus: 123456,
          parent: {},
          members: []
        },
      ],
      showDetail: false,
      item: {}
    }
  },
  methods:{
    formatDate(row, column, cellValue) {
      return formatDateYMD(cellValue)
    },
    formatLotteryState(state) {
      switch(state) {
        case 0: 
          return '未开奖'
          break;
        case 1: 
          return '已中奖'
          break;
        case 2: 
          return '未中奖'
          break;
        case 3: 
          return '已撤单'
          break;
      }
    },
    cellStyle({row, column, rowIndex, columnIndex}) {
      if (columnIndex == 0) {
        return 'text-align: left; padding-left: 10px'
      }
      else if (columnIndex == 1) {
        return 'text-align: center'
      } else {
        return 'text-align: right; padding-right: 10px'
      }
    },
    getParent(arr, parent) {
      arr.unshift(parent.accountName)
      if (parent.parent) {
        this.getParent(arr, parent.parent)
      }
    },
    balanceFormater(num) {
      let str = num.toString()
      return str.slice(1)
    },
    // 表格点击=》详情
    checkDetail(row, column, e) {
      this.item = row
      this.showDetail = true 
    },
    hideDetail() {
      this.showDetail = false
    }
  },
  computed: {
    ...mapGetters('lottery', ['getUserInfo', 'getIsPhone']),
    relations() {
      let parents = []
      let parent = this.getUserInfo.parent
      this.getParent(parents, parent)
      return parents
    },
    groupInfo() {
      return [this.getUserInfo]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
@media screen and (min-width 750px) 
  .personal-report  
    .member-relations 
      height 40px 
      background $color-text-button
      display flex 
      align-items center
      box-sizing border-box 
      padding-left 20px
    .group-detail 
      height 40px 
      display flex 
      align-items center 
      justify-content space-between 
      box-sizing border-box 
      padding 0 20px
      .group-size 
        color red
      .title 
        font-size 15px 
        font-weight 700
  .personal-report >>> .el-table 
    tr 
      height 40px 
      line-height 40px
      padding-top 0
    th 
      padding 0
      background #e7e0dd
      color $color-theme-dark
      .cell
        padding-left 20px
        font-size 15px
        font-weight 700
    td 
      padding 0
      height 40px
      line-height 40px
      .cell 
        padding-left 20px
        height 21px
        button 
          color $color-sub-grey
          padding 0
@media screen and (max-width 750px)
  .personal-report  >>> .content
    margin 0 !important
    .personal-report >>> .el-table 
      border-radius 10px !important
      border 1px solid green
      tr 
        height 40px 
        line-height 40px
        padding-top 0
      th 
        padding 0
        background #e7e0dd
        color $color-theme-dark
        .cell
          padding 0
          font-size 15px
          font-weight 700
      td 
        height 40px
        line-height 40px
        padding 0
        .cell 
          height 40px
          line-height 40px
          padding 0 
    .personal-report  
      .billboard-wrapper 
        box-sizing border-box 
        padding 0 10px
    .billboard-content 
      width 100% 
      display flex
      height 70px
      background #fff
      .item 
        width 50% 
        box-sizing border-box 
        display flex 
        flex-direction column 
        justify-content center
        .title 
          margin-bottom 10px
          color $color-sub-grey
        .statistics
          display inline-block
          span 
            font-size 15px
          .extra 
            display inline-block
            font-size 10px
          &.amount 
            color $color-primary-green
          &.bonus
            color $color-theme-red
  .personal-detail 
    height 40px 
    display flex 
    align-items center 
    justify-content space-between 
    box-sizing border-box 
    padding 0 10px
    .group-size 
      color red
    .title 
      font-weight 700
  .personal-report 
    .billboard-wrapper 
      box-sizing border-box 
      padding 0 10px 
    .table-wrapper 
      box-sizing border-box 
      padding 0 10px
  .detail-info 
    position fixed 
    top 0
    left 0
    right 0
    bottom 0
    z-index 100000
    background:linear-gradient(180deg, #e5e5e5, #fefbfb)
</style>